<template>
  <div class="wrap">
    <div class="g-card" style="padding-bottom: 16px;margin-top: 10px;">
      <div class="title-header header-line" style="border-bottom:0;margin-bottom: 0;">质检任务查询</div>
      <div class="top top-self">
        <div class="col-20">
          <div class="info">总任务数</div>
          <div class="infoNum">10<span>件</span></div>
        </div>
        <div class="col-20">
          <div class="info">待质检任务</div>
          <div class="infoNum">10<span>件</span></div>
        </div>
        <div class="col-20">
          <div class="info">质检待回复任务</div>
          <div class="infoNum">10<span>件</span></div>
        </div>
        <div class="col-20">
          <div class="info">无人质检</div>
          <div class="infoNum">10<span>件</span></div>
        </div>
      </div>
    </div>

    <div class="g-card" style="padding: 16px;margin-top: 10px;">
      <Form :model="superviseForm" ref="superviseForm" class="form-row0" style="display: block;">
        <Row type="flex" justify="space-between">
          <Col span="4">
          <FormItem>
            <Input placeholder="服务人员管理机构" v-model="superviseForm.aaa" />
          </FormItem>
          </Col>
          <Col span="4">
          <FormItem>
            <Input placeholder="服务人员姓名" v-model="superviseForm.bbb" />
          </FormItem>
          </Col>
          <Col span="4">
          <FormItem>
            <Input placeholder="质检结论" v-model="superviseForm.ccc" />
          </FormItem>
          </Col>
          <Col v-if="!showMore" span="4" class="btn-more-box">
          <div @click="showMore = !showMore">
            高级搜索
            <Icon :type="'ios-arrow-' + (showMore ? 'forward' : 'down')" />
          </div>
          </Col>
          <i-col v-else span="4">
            <FormItem>
              <Select v-model="superviseForm.ddd" placeholder="质检节点" @on-change="changeSaleChannel" clearable>
                <Option v-for="item in saleChannelList" :key="item.key" :value="item.key">{{ item.value }}</Option>
              </Select>
            </FormItem>
          </i-col>
        </Row>
        <Row>
          <i-col span="24" style="text-align: right;">
            <!-- :loading="queryLoading" -->
            <Button type="primary" @click="handleSubmit()" style="margin-right:20px">查询</Button>
            <Button @click="handleReset()">重置</Button>
          </i-col>
        </Row>
      </Form>
    </div>
    <Card>
      <div class="table-btn-box">
        <Button @click="xaifa" type="primary" ghost>
          <i class="el-icon-plus"></i>
          下发结论
        </Button>

        <div class="right-btns">
          <Button @click="clickButton(0)" type="text"
            :style="[flagIndex == 0 && {'color': 'rgb(66, 101, 237)'}]">全部</Button>
          <Button @click="clickButton(1)" type="text"
            :style="[flagIndex == 1 && {'color': 'rgb(66, 101, 237)'}]">今日计划</Button>
          <Button @click="clickButton(2)" type="text"
            :style="[flagIndex == 2 && {'color': 'rgb(66, 101, 237)'}]">面访计划</Button>
          <Button @click="clickButton(3)" type="text"
            :style="[flagIndex == 3 && {'color': 'rgb(66, 101, 237)'}]">大额单</Button>
          <Button @click="clickButton(4)" type="text"
            :style="[flagIndex == 4 && {'color': 'rgb(66, 101, 237)'}]">困难件</Button>
          <Button @click="clickButton(5)" type="text"
            :style="[flagIndex == 5 && {'color': 'rgb(66, 101, 237)'}]">本月生日客户</Button>
          <Button @click="clickButton(6)" type="text"
            :style="[flagIndex == 6 && {'color': 'rgb(66, 101, 237)'}]">主动服务</Button>
          <Button @click="clickButton(7)" type="text"
            :style="[flagIndex == 7 && {'color': 'rgb(66, 101, 237)'}]">未服务</Button>
          <Button @click="clickButton(8)" type="text"
            :style="[flagIndex == 8 && {'color': 'rgb(66, 101, 237)'}]">投诉客户</Button>
        </div>
      </div>
      <el-table :data="tableList" @selection-change="handleSelectionChange" style="width: 100%;margin-top: 20px;">
        <el-table-column type="selection" width="55" fixed="left">
        </el-table-column>
        <el-table-column label="管理机构" align="center" prop="aaa" min-width="130" />
        <el-table-column label="渠道" align="center" prop="bbb" />
        <el-table-column label="服务人员" align="center" prop="ccc" min-width="130" />
        <el-table-column label="保单号" align="center" prop="ddd" min-width="130" />
        <el-table-column label="投保人" align="center" prop="eee" />
        <el-table-column label="任务类型" align="center" prop="fff" />
        <el-table-column label="已服务次数" align="center" prop="ggg" min-width="130">
          <template scope="scope">
            <div style="color:rgb(24, 131, 231)">{{ scope.$index }}次</div>
          </template>
        </el-table-column>
        <el-table-column label="最近一次服务日期" align="center" prop="hhh" min-width="130" />
        <el-table-column label="最近一次服务方式" align="center" prop="iii" min-width="130" />
        <el-table-column label="质检原因" align="center" prop="jjj" min-width="130" />
        <el-table-column label="当前质检节点" align="center" prop="kkk" min-width="130" />
        <el-table-column label="当前质检结论" align="center" prop="lll" min-width="130" fixed="right" />
        <el-table-column label="操作" align="center" width="130" fixed="right">
          <template scope="scope">
            <el-button @click="$router.push({name:'PlannedTaskDetail'})" type="text" size="mini" icon="el-icon-document">查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="superviseForm.pageNum" :pageSize="superviseForm.pageSize" :total="total"
        @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
      <!-- <pagination :total="total" :page.sync="superviseForm.pageNum" :limit.sync="superviseForm.pageSize"
        @pagination="handleSubmit" /> -->
    </Card>
    <el-dialog :close-on-click-modal="false" title="下发质检结论" :show-close="false" :visible.sync="rengongVisible">
      <el-form ref="rengongForm" label-width="120px" label-position="right" :model="rengongForm">
        <el-form-item prop="lll" label="服务方式">
          <el-radio-group v-model="rengongForm.lll">
            <el-radio label="通过">通过</el-radio>
            <el-radio label="不通过">不通过</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="zzz" label="质检说明">
          <el-input v-model="rengongForm.zzz" type="textarea" :rows="3" style="width:300px" placeholder="请输入内容">
          </el-input>
        </el-form-item>
        <div class="dialog-fromBtn">
          <el-button type="info" icon="el-icon-refresh-right" plain @click="rengongVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitItem">保存并提交</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "QualityInspectionTaskInquiry",
  data() {
    return {
      rengongVisible: false,
      showMore: false,
      multipleSelection: [],
      total: 6,
      rengongForm: {},
      superviseForm: {
        pageNum: 1,
        pageSize: 6,
        aaa: "",
        bbb: "",
        ccc: "",
        ddd: "",
      },
      saleChannelList: [],
      flagIndex: 0,
      tableList: [
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "李代理人-DL00001",
          ddd: "002933293",
          eee: "王五",
          fff: "应交前任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "短信联系业务员",
          jjj: "宽末第一次服务",
          kkk: "宽末第一次服务",
          lll: "待质检",
        },
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "李代理人-DL00002",
          ddd: "002933294",
          eee: "李五",
          fff: "应交前任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "短信联系业务员",
          jjj: "前后服务记录不一致",
          kkk: "服务人员回复",
          lll: "不通过",
        },
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "王代理人-DL00003",
          ddd: "000238892",
          eee: "李四",
          fff: "应交期任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "短信联系业务员",
          jjj: "前后服务记录不一致",
          kkk: "服务人员回复",
          lll: "不通过",
        },
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "张代理人-DL00002",
          ddd: "002399123",
          eee: "李四",
          fff: "前瞻任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "网络联系业务员",
          jjj: "第三次服务未面访",
          kkk: "外勤主管二次审核",
          lll: "不通过",
        },
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "王代理人-DL00003",
          ddd: "000238131",
          eee: "吴一",
          fff: "前瞻任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "短信联系业务员",
          jjj: "前瞻服务客户要求退保",
          kkk: "分公司内勤审核",
          lll: "不通过",
        },
        {
          aaa: "上海分公司",
          bbb: "个险",
          ccc: "王代理人-DL00003",
          ddd: "000299812",
          eee: "周二",
          fff: "应交期任务",
          ggg: "1",
          hhh: "2023-12-02",
          iii: "短信联系业务员",
          jjj: "第三次服务未面访",
          kkk: "服务人员回复",
          lll: "通过",
        },
      ],
    };
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    clickButton(n) {
      this.flagIndex = n;
    },
    handleSubmit() {},
    handleCurrentChange() {},
    handleSizeChange() {},
    submitItem() {
      this.tableList.shift();
      this.tableList.push(this.rengongForm);
      this.rengongVisible = false;
      this.multipleSelection = [];
    },
    handleReset() {
      this.superviseForm = {
        aaa: "",
        bbb: "",
        ccc: "",
        ddd: "",
      };
    },
    xaifa() {
      if (this.multipleSelection.length != 1) {
        this.$Message.warning("请选择一条数据");
      } else {
        this.rengongForm = JSON.parse(
          JSON.stringify(this.multipleSelection[0])
        );
        this.rengongForm.lll = this.rengongForm.lll == '待质检' ? "通过" : this.rengongForm.lll;
        this.rengongVisible = true;
      }
    },
  },
};
</script>
<style lang="less">
@import "./index.less";
</style>

<style lang="less" scoped>
.dialog-fromBtn {
  display: flex;
  justify-content: center;
  padding: 16px 32px 0 0;
}
.botton-btns {
  position: absolute;
  bottom: 30px;
  right: 40px;
}
.form-row0 {
  /deep/ .ivu-row {
    justify-content: space-between !important;
  }
}
.btn-more-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 33px;
  color: rgb(66, 101, 237);
}
.table-btn-box {
  display: flex;
  margin-bottom: 20px;
  .right-btns {
    flex: 1;
    text-align: end;
    button + button {
      border-left: 1px solid rgb(234, 234, 234);
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../../../styles/base.scss";

.header-btn {
  @include headerBtn;
}

.wrap {
  @include titleWrap;
}
.header-line::before {
  width: 5px !important;
  // margin-left: 10px;
  background: rgb(8, 117, 255);
}
.top-self {
  width: 80%;
}
.col-20 {
  /* 矩形 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 85px;
  border-radius: 6px;
  background: rgb(246, 246, 246);
  margin: 0 10px;
}
.info {
  color: rgb(153, 153, 153) !important;
  font-size: 12px !important;
}
.infoNum {
  color: rgb(80, 80, 80);
  font-family: 思源黑体;
  font-size: 24px;
  font-weight: 700;

  span {
    color: rgb(42, 42, 42);
    font-family: 思源黑体;
    font-size: 12px;
  }
}
</style>